<style lang="scss">
  @import './uv.scss';
</style>

<template>
  <div class=" ">
    <div class="p1756274600">
      <div class="fz50 pl15">{{real_name}}</div>
      <div class="p1756274474 pl15 pr15">
        <div>
          <div class="fz70" style="display: inline;">{{on_time_rate}}</div>
          <div class="fz44" style="display: inline;">%</div>
          <div class="fz30" style="color: #9FA0A0;">准时率</div>
        </div>
        <div>
          <div class="fz70" style="display: inline;">{{positive_rating}}</div>
          <div class="fz44" style="display: inline;">%</div>
          <div class="fz30" style="color: #9FA0A0;">好评率</div>
        </div>
        <div>
          <div class="fz70" style="display: inline;">{{daily_average_delivery}}</div>
          <div class="fz44" style="display: inline;">%</div>
          <div class="fz30" style="color: #9FA0A0;">日均送单</div>
        </div>
        <div>
          <uv-avatar mp-avatar mode="widthFix" class="" size="200rpx" src=""></uv-avatar>
        </div>
      </div>
      <view class="p1756262706">
        <uv-tags borderColor="rgba(255, 255, 255, 0)" v-for="(item, index) in list" :key="index" size="mini"
          :text="item.name + ' ' + item.num" :plain="!item.checked" type="info">
        </uv-tags>
      </view>
    </div>
    <div class="p1756275611">
      <div class="fz32 fac jcc p1756275624">拉黑</div>
      <div @click="tap('open')" class="fz32 fac jcc p1756275630">联系骑手</div>
    </div>
    <uv-popup round="10" ref="popup" mode="bottom">
      <div class="pb40">
        <div class="p1756256678">
          <div class="fz36" style="text-align: center; flex: 1;font-weight: 600;">联系骑士</div>
          <div class="p1756256909">
            <uv-icon @click="tap('close')" size="40rpx" color="#C9CACA" name="close"></uv-icon>
          </div>
        </div>
        <uv-cell-group :border="false">
          <uv-cell :cellStyle="{padding: '20rpx 30rpx 20rpx 30rpx'}" :iconStyle="{fontSize: '40rpx', color: '#333'}"
            :rightIconStyle="{fontSize: '40rpx', color: '#C9CACA'}" :titleStyle="{fontSize: '30rpx'}" :border="false"
            isLink icon="phone" title="电话骑士" :stop="false"></uv-cell>
          <uv-cell :cellStyle="{padding: '20rpx 30rpx 20rpx 30rpx'}" :stop="false"
            :iconStyle="{fontSize: '40rpx', color: '#333'}" :rightIconStyle="{fontSize: '40rpx', color: '#C9CACA'}"
            :titleStyle="{fontSize: '30rpx'}" :border="false" isLink icon="chat" title="在线联系"></uv-cell>
        </uv-cell-group>
      </div>
    </uv-popup>
  </div>
</template>
<script>
  import { commentRider } from '@/api/index.js'
  export default {
    data() {
      return {
        routeQuery: {},
        list: [],
        daily_average_delivery: 0,
        positive_rating: 0,
        on_time_rate: 0,
        real_name: ''

      }
    },
    onLoad(options) {
      if (options) this.routeQuery = options
      this._commentRider()
    },
    methods: {
      _commentRider() {
        uni.hideLoading()
        uni.showLoading({ title: '加载中', mask: true })
        commentRider({ neighbor_worker_id: this.routeQuery.id }).then(res => {
          if (res.code == 200) {
            uni.hideLoading()
            this.list = res.result.list
            this.daily_average_delivery = res.result.daily_average_delivery
            this.positive_rating = res.result.positive_rating
            this.on_time_rate = res.result.on_time_rate
            this.real_name = res.result.real_name
          }
        })
      },
      tap(type) {
        if (type == 'close') {
          this.$refs.popup.close()
        }
        if (type == 'open') {
          this.$refs.popup.open()
        }
      }
    },
  }
</script>
<style>
  page {
    background-color: #FAFAFA;
  }
</style>


<style lang="scss" scoped>
@import './common.scss';
  .fz70 {
    font-size: 70rpx;
  }

  .fz44 {
    font-size: 44rpx;
  }

  .pr15 {
    padding-right: 15rpx;
  }

  .p1756274474 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 40rpx;
    padding-bottom: 60rpx
  }

  .p1756274600 {
    background-color: #fff;
    padding: 80rpx 15rpx 0 15rpx;
  }

  .p1756262706 {
    display: flex;
    flex-wrap: wrap;
    border-top: 2rpx solid #EFEFEF;
    margin-left: 30rpx;
    margin-right: 30rpx;
    padding-top: 30rpx;
    box-sizing: border-box;
    padding-bottom: 30rpx;
  }

  .p1756275611 {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
    left: 0;
    box-sizing: border-box;
  }

  .p1756275624 {
    width: 135rpx;
    height: 70rpx;
    border-radius: 50rpx;
    border: 2rpx solid #C9CACA;
  }

  .p1756275630 {
    width: 325rpx;
    height: 70rpx;
    border-radius: 50rpx;
    border: 2rpx solid #E60012;
  }

  .p1756256678 {
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 40rpx;
    padding-bottom: 20rpx;

    .p1756256909 {
      position: absolute;
      right: 30rpx;

    }
  }

  .pb40 {
    padding-bottom: 40rpx;
  }
</style>